<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>大拇哥资源共享平台</title>
    <!--视口 不缩放 -->
    <meta name="viewport" content="user-scalable=no,width=device-width, initial-scale=1.0,  minimum-scale=1.0, maximum-scale=1.0">
    <meta name="flexible" content="initial-dpr=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 网页作者 -->
    <meta name="author" content="hg" />
    <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no" />
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 不让百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="msapplication-TileColor" content="#000" />
    <!--<link href="logo.ico" rel="shortcut icon" type="image/x-icon">-->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="__PUBLIC__/dist/js/html5shiv.min.js"></script>
      <script src="__PUBLIC__/dist/js/respond.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="favicon.ico">
    <!-- ZUI1.7.0 -->
    <link rel="stylesheet" href="__PUBLIC__/dist/css/zui.min.css">

    <link href="dist/css/mobile.css" rel="stylesheet">
</head>
<body>
<div id="page"> 
    <!-- Header -->
    <header>
        <div class="logo pull-left"><a href="mobile_index.html"><img src="dist/image/logo.png"><h1 class="hide-sm">共建共享教学资源库平台</h1></a></div>
        <div class="pull-right user">
            <a class="icon icon-menu"></a>
            <div class="user-menu">
                <a>个人中心</a>
                <a>退出登录</a>
            </div>
        </div>
    </header>
    <!-- Header End -->
    
    <section class="details-head">
        <div class="details-head-img">
            <img src="dist/image/xx.jpg">
        </div>
        <div class="details-head-text container">
            <h1 class="mb-20"><span>项目01</span>　专业名称 title</h1>
            <div class="con-group">
                <p class="con-title">岗位数：<span class="blue">123</span></p>
            </div>
            <div class="project-head-label mb-10 clearfix">
                <label>电子教材<span class="label">999</span></label>
                <label>教学视频<span class="label">999</span></label>
                <label>微课课件<span class="label">999</span></label>
                <label>电子教案<span class="label">999</span></label>
                <label>电子课件<span class="label">999</span></label>
                <label>教学素材<span class="label">999</span></label>
            </div>
            <div class="con-group">
                <p class="con-title">专业简介</p>
                <div>introduct 介绍-文字内容<br>文字内容</div>
            </div>
        </div>
    </section>

    <section class="details-content container">
        <ul class="details-content-nav clearfix mb-20">
            <li class="active"><a href="mobile_material.html" data-container="#material">电子教材</a></li>
            <li><a href="mobile_about.html" data-container="#about">相关详情</a></li>
            <li><a href="mobile_extend.html" data-container="#extend">项目资源</a></li>
        </ul>
        <div id="material" class="material clearfix details-container"></div>
        <div id="about" class="about clearfix details-container"></div>
        <div id="extend" class="extend clearfix details-container"></div>
    </section>
       
    <footer>
        <div class="container">
            <div class="link">
                <h1 class="mb-20">合作链接</h1>
                <div>
                    <a>腾讯大学</a><a>腾讯网教育频道</a><a>腾讯大讲堂</a><a>腾讯精品课</a><a>腾讯电脑管家</a><a>QQ智慧校园</a>
                </div>
            </div>
            <p class="text-center mb-10">主办单位：厦门大拇哥动漫股份有限公司</p>
            <p class="text-center mb-10">邮箱：kkintl@netvigator.com</p>
            <p class="text-center mb-10">网址：http://www.domoko.com.cn/</p>
            <p class="text-center mb-10">联系电话：0592-2529778</p>
            <p class="text-center">闽ICP备12000304号-2 地址：厦门市软件园二期望海路10号大拇哥大厦</p>
        </div>
    </footer>
</div>

<!-- 图片显示 -->
<div class="modal fade" id="lightimg">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="col-md-9 image">
                <button class="controller prev show"><i class="icon icon-chevron-left"></i></button>
                <button class="controller next show"><i class="icon icon-chevron-right"></i></button>
                <img id="lightimgSrc" src="">
            </div>
            <div class="col-md-3 content">
                <h4 id="lightimgTitle" class="mb-20">图片名称</h4>
                <p id="lightimgTime" class="mb-10">时间：2017-11-11</p>
                <p id="lightimgContent" class="mb-60">图片的文字简介，图片的文字简介，图片的文字简介，图片的文字简介，图片的文字简介，图片的文字简介，图片的文字简介，图片的文字简介，图片的文字简介。</p>
                <div class="text-right"><a class="btn btn-block btn-primary" id="lightimgDown">下载</a></div>
            </div>
        </div>
    </div>
</div>
<!-- 电子教材 -->
<div class="modal fade" id="downModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body clearfix">
                <div class="col-xs-12">
                    <h2 class="mb-20 card-title">项目一：人口普查</h2>
                    <div class="list-down clearfix">
                        <ul>
                            <li class="clearfix"><div class="col-xs-7">素材-音频123.MP3</div><div class="col-xs-3">2017-11-11</div><div class="col-xs-2 text-right"><a class="icon icon-down"></a></div></li>
                            <li class="clearfix"><div class="col-xs-7">素材-音频123.MP3</div><div class="col-xs-3">2017-11-11</div><div class="col-xs-2 text-right"><a class="icon icon-down"></a></div></li>
                            <li class="clearfix"><div class="col-xs-7">素材-音频123.MP3</div><div class="col-xs-3">2017-11-11</div><div class="col-xs-2 text-right"><a class="icon icon-down"></a></div></li>
                            <li class="clearfix"><div class="col-xs-7">素材-音频123.MP3</div><div class="col-xs-3">2017-11-11</div><div class="col-xs-2 text-right"><a class="icon icon-down"></a></div></li>
                            <li class="clearfix"><div class="col-xs-7">素材-音频123.MP3</div><div class="col-xs-3">2017-11-11</div><div class="col-xs-2 text-right"><a class="icon icon-down"></a></div></li>
                            <li class="clearfix"><div class="col-xs-7">素材-音频123.MP3</div><div class="col-xs-3">2017-11-11</div><div class="col-xs-2 text-right"><a class="icon icon-down"></a></div></li>
                            <li class="clearfix"><div class="col-xs-7">素材-音频123.MP3</div><div class="col-xs-3">2017-11-11</div><div class="col-xs-2 text-right"><a class="icon icon-down"></a></div></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<i class="goTop"></i>

<script src="__PUBLIC__/dist/js/jquery.js"></script>

<script src="__PUBLIC__/dist/js/main.js"></script> 
<script>
$(function(){
    var imgbox;
    var index;
    // Tab1 切换active
    $('body').on('click', '.details-content-nav > li:not(.disabled) > a', function(e) {
        var $item = $(this).parent('li');
        $item.parent().children('.active').removeClass('active');
        $item.addClass('active');


        $(".details-container").hide();

        e.preventDefault();
        var container = $(this).data("container");
        var href = $(this).attr("href");

        $(container).show();
        if( $(container).html() ) return false;
        $(container).load(href,function(){
            //console.log(container)
        });
    });
    $(".details-content-nav a").eq(0).trigger('click');


    // modal显示 IMG
    function lightImg(num){
        if(num == 0){
            if(imgbox.find("[data-image]").length-1 == 0){
                $("#lightimg .controller").removeClass("show");
            }else{
                $("#lightimg .controller.prev").removeClass("show");
                $("#lightimg .controller.next").addClass("show");
            }
        }else if(num == imgbox.find("[data-image]").length-1){
            $("#lightimg .controller.prev").addClass("show");
            $("#lightimg .controller.next").removeClass("show");
        }else{
            $("#lightimg .controller.prev").addClass("show");
            $("#lightimg .controller.next").addClass("show");
        }

        var o = imgbox.find(".card-box").eq(num).find("img");
        $("#lightimgSrc").attr("src",o.data("image"));
        $("#lightimgTitle").html(o.data("title"));
        //$("#lightimgTime").html(o.data("time"));
        //$("#lightimgContent").html(o.data("content"));
        $("#lightimgDown").attr("href",o.attr("src"));
    }
    $("#lightimg").on("click",".prev",function(){
        index--;
        lightImg(index);
    })
    $("#lightimg").on("click",".next",function(){
        index++;
        lightImg(index);
    })

})
</script>
</body>
</html>